<!--
 * @Author: wwssaabb
 * @Date: 2021-05-26 08:19:22
 * @LastEditTime: 2021-05-26 10:28:54
 * @FilePath: \demo\canvas_demo\demo_API\drawimg.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas_demo globalCompositeOperation</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container{
      position: relative;
    }
    
  </style>
</head>

<body>
  <div class="container">
    <canvas id="canvas1" width="800px" height="800px"></canvas>
  </div>
  

  <script type="text/javascript">
  
    let canvas = document.querySelector('#canvas1')
    let ctx = canvas.getContext('2d')

    //第一个矩形，为目标图像
    ctx.fillStyle='cyan'
    ctx.fillRect(200,200,400,400)
   
    //第二个矩形部分覆盖在第一个矩形上，为源图像，默认覆盖是后面新建的层覆盖之前层,相当于source-over
    //globalCompositeOperation  设置或返回新图像如何绘制到已有的图像上
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)


    //source-atop   在目标顶部显示源图像，只有目标图像之内的部分才显示
    //ctx.globalCompositeOperation='source-atop'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //source-in   在目标顶部显示源图像，只有目标图像和源图像相交的部分才显示
    //ctx.globalCompositeOperation='source-in'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //source-out   在目标顶部显示源图像，只有目标图像和源图像相交的部分之外的源图像部分才显示
    //ctx.globalCompositeOperation='source-out'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //destination-over   在源图像顶部显示目标图像，和source-over相反
    //ctx.globalCompositeOperation='destination-over'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //destination-atop   在目标图像顶部显示源图像，不在目标图像上的源图像部分隐藏，和source-atop相反
    //ctx.globalCompositeOperation='destination-atop'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //destination-in   显示重合的目标图像部分，和source-in相反
    //ctx.globalCompositeOperation='destination-in'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //destination-out   显示非重合的目标图像部分，和source-out相反
    //ctx.globalCompositeOperation='destination-out'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //lighter   显示两图像一起显示
    //ctx.globalCompositeOperation='lighter'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //lighter   显示源图像。忽略目标图像。
    //ctx.globalCompositeOperation='copy'
    //ctx.fillStyle='blue'
    //ctx.fillRect(400,400,400,400)

    //lighter   显示两图像非重合部分
    ctx.globalCompositeOperation='xor'
    ctx.fillStyle='blue'
    ctx.fillRect(400,400,400,400)

  </script>

</body>

</html>